<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name='format-detection' content='telephone=no' />
    <title>人车人</title>
    <link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
	<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="/assets/css/common.css" />
    <link rel="stylesheet" href="/assets/css/login.css" />

</head>
<body>
<header>
    <div id='goBack'>
        <i class="inlineBlockImg"></i>
    </div>
    <span>注册</span>
    <a href='/login'>登录</a>
</header>
<section>
    <div id="logo"></div>
    <div>
        <form id='form'>
            <ul id="main_form">
                <li>
                    <i class="inlineBlockImg inputPhoneLogo"></i>
                    <input type="text" placeholder="请输入手机号码" id='username'>
                </li>
                <li>
                    <i class="inlineBlockImg inputPassWordLogo"></i>
                    <input type="password" placeholder="请输入密码" id='password'>
                </li>
                <li>
                    <i class="inlineBlockImg inputYqmLogo"></i>
                    <input type="text" placeholder="请输入邀请码" id='yqm'>
                </li>
                <li>
                    <i class="inlineBlockImg inputCodeLogo" style="height:2.3rem;"></i>
                    <input type="text" placeholder="请输入验证码" id='yzm'>
                    <!--验证码-->
                    <img alt="" src="/assets/img/验证码@2x.png" id='getyzm' style='width:7.5rem;padding-bottom:.2rem;'>
                </li>
            </ul>
        </form>
    </div>
    <div id="main_footer">
        <u class="blockImg" id='btn'></u>
    </div>
</section>
</body>

<script src="/assets/js/jquery-3.1.1.min.js"></script>
<script src="/assets/js/fastclick.min.js"></script>
<script src="/assets/js/xxsg.js"></script>

<script>
    $(function(){
    	var getyzmFilter = false
        $("#getyzm").on("click",function(){
        	if (getyzmFilter) {
				return false
			}
        	if (check1()) {
        		var form = $("#form")

        		var username = $('#username').val();
        		var id = $('#yqm').val();
        		
        		$.ajax({
        			type: "POST",
                    url: "/login/getVerifyCode",
                    data: {
                    	username:username,
                    	id:id
                    },
                    success: function(data){
                    	if (data.code!="2") {
                       		_x.showTip(data.msg);
        				}else{
        					getyzmFilter = true
        					var timeout = 120
        					var interval = setInterval(function(){
        						timeout--
        						$("#getyzm").html("获取验证码("+timeout+")")
        						if (timeout==0) {
        							$("#getyzm").html("获取验证码")
        							getyzmFilter = false
        							clearInterval(interval)
								}
        					}, 1000)
        				}
                    }
        		})
			}
        })
        
        var isSubmit = true;
            $("#btn").on("click",function(){
            	if(!isSubmit)return
            	isSubmit = false;
            	$("#btn").html("<div class='textloading'></div>")
            	if (check2()) {
            		var form = $("#form")
            		
            		var username = $('#username').val(),
	    				password = $('#password').val(),
	    				yzm = $('#yzm').val(),
	    				yqm = $('#yqm').val();
            		
            		$("#btn").html("<div class='textloading'></div>")
            		$.ajax({
            			type: "POST",
                        url: "/login/reg",
                        data: {
                        	username: username,
                        	id: yqm,
                        	yzm: yzm,
                        	password: password
                        },
                        success: function(data){
                        	if (data.code==0) {
								location.href = data.msg
							}else{
								_x.showTip(data.msg);
								isSubmit = true;
								/* $("#btn").html("注册") */
							}
                        },
                        error:function(){
                        	isSubmit = true;
                        	/* $("#btn").html("注册") */
                        }
                    })
				}else{
					isSubmit = true;
					/* $("#btn").html("注册") */
				}
            })
            
            $('#username').blur(blurYz);
    		$('#password').blur(blurYz);
    		$('#yzm').blur(blurYz);
    		$('#yqm').blur(blurYz);
    		
    		function blurYz(){
    			var username = $('#username').val(),
    				password = $('#password').val(),
    				vcode = $('#yzm').val(),
    				yqm = $('#yqm').val();
    			var subbtn = $('#btn')
    			
    			if( !(_x.isEmpty(username)) && !(_x.isEmpty(password)) && !(_x.isEmpty(vcode)) && !(_x.isEmpty(yqm)) ){
    				subbtn.addClass('active')
    			}else{
    				if(subbtn.hasClass('active')){
    					subbtn.removeClass('active')
    				}
    			}

    		}
    		
    		$('#goBack').click(function(e){
    			e.preventDefault();
    			window.history.go(-1);
    		})
            
            
        
        
        function check1(){
        	$("#getyzm").removeClass("success")
			$("#getyzm").addClass("fail")
        	var $username = $('#username');
        	var $password = $('#password');
        	if ($username.val()=="") {
        		_x.showTip("手机号不能为空！");
				return false
			}else if($username.val().length!=11||/[^0-9]/.test($username.val())){
				_x.showTip("手机号码无效！");
				return false
			}
        	if ($password.val()=="") {
        		_x.showTip("密码不能为空！");
				return false
			}
			$("#getyzm").removeClass("fail")
			$("#getyzm").addClass("success")
        	return true
        }
        function check2(){
        	check1()
        	var $yzm = $("#yzm");
        	if ($yzm.val()==null||$yzm.val().length==0) {
				_x.showTip("验证码不能为空！");
				$yzm.val("");
				return false
			}else if(/[^0-9]/.test($yzm.val())||$yzm.val().length!=4){
				_x.showTip("验证码不正确！");
				return false
			}
        	return true
        }
        
        

    })
</script>
</html>